import React, { Component } from 'react';
import { View, Image, StyleSheet, Text, Button, ScrollView, WebView, Dimensions } from 'react-native';
import { connect } from 'react-redux';
import CommonTitleBar from '../components/CommonTitleBar';
import NccButton from '../components/Button';
import Table from '../components/Table';
import { ROUTERMAP, Global } from '../util/constants';
import { scaleSize, scaleFontSize } from '../util/size';
import { IReduxMarketInfo, IReduxLastPrice } from '../interface';
import { utilGetMarketInfoByCoinType, utilGetAmountToByCoinType } from '../util/marketUtil';
import LastPriceTable from '../components/LastPriceTable';
// const moment = require('mom')

const {height: deviceHeight} = Dimensions.get('window');

function test(a: string) {

}

// export type IFucTest = test

interface IProps {
    navigation: any,
    marketInfo: IReduxMarketInfo,
    lastPrice: IReduxLastPrice,
}

interface IState {
    nowPrice: string,
    extent: string,
    cny: string,
    coinType: string,
}

class MakertInfo extends Component<IProps, IState> {
    constructor(props) {
        super(props);
        this.state = {
            nowPrice: '',
            extent: '',
            cny: '',
            coinType: ''
        }
    }

    componentDidMount() {
        const { navigation } = this.props;
        const nowPrice = navigation.getParam('nowPrice', '0');
        const extent = navigation.getParam('extent', '0%');
        const cny = navigation.getParam('cny', '0');
        const type = navigation.getParam('type', 'ETH/BTC');
        this.setState({ nowPrice, extent, cny, coinType: type });
    }

    renderRecent = () => {
        let {lastPrice} = this.props;
        let {coinType} = this.state;
        let data = [];
        if (lastPrice[coinType]) {
            data = lastPrice[coinType];
        }
        return (
            <View style={{
                padding: 10,
            }}>
                <LastPriceTable title={'最近成交'} data={data}/>
            </View>
        )
        let columns = [
            {
                title: '时间',
                dataIndex: 'timestamp',
                render: (data) => {
                    let time;
                    let timestamp = data;
                    try {
                        time = new Date(Number(timestamp + '000')).toTimeString().slice(0, 8);
                    } catch {
                        time = '';
                    }
                    return <Text>
                        {time}
                    </Text>
                }
            },
            {
                title: '价格',
                dataIndex: 'price',
                render: (data) => {
                    return <Text style={{textAlign: 'right', width: 100}}>
                        {data}
                    </Text>
                }
            },
            {
                title: '数量',
                dataIndex: 'amount',
                render: (data) => {
                    return <Text style={{textAlign: 'right'}}>
                        {data}
                    </Text>
                }
            }
        ];
        return (
            <View style={{
                padding: scaleSize(20),
            }}>
                <Table dataSource={data} columns={columns} title={'最近成交'} />
            </View>
        )
    }

    turnToPage = (pageName: string, params?: Object) => {
        this.props.navigation.navigate(pageName, params);
    };

    renderInfo() {
        const {marketInfo} = this.props;
        const {market} = marketInfo;
        const {coinType} = this.state;
        let index = market.findIndex(v => v.type == coinType);
        if (index == -1) {
            return null;
        }

        let data = market[index];
        const {extent, amount, high, low, value} = data;
        
        let _type = coinType.split('/')[0];
        const amountTo = utilGetAmountToByCoinType(marketInfo, _type);  // (value * 6.8).toFixed(2);
        let color = Global.greenColor;
        if (extent[0] == '-') {
            color = Global.redColor;
        }

        return (
            <View style={{ display: 'flex', flexDirection: 'row', padding: scaleSize(10) }}>
                <View style={{ flex: 2, display: 'flex', flexDirection: 'column' }}>
                    <View>
                        <Text style={{
                            color: color,
                            fontSize: scaleFontSize(30),
                        }}>{value.toFixed(2)}</Text>
                    </View>
                    <View style={{ display: 'flex', flexDirection: 'row', marginTop: scaleSize(5) }}>
                        <Text>≈ {amountTo} CNY</Text>
                        <Text style={{
                            color: color,
                            marginLeft: scaleSize(3),
                        }}>{extent} </Text>
                    </View>
                </View>

                <View style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
                    <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
                        <Text>高</Text>
                        <Text>{high.toFixed(2)}</Text>
                    </View>
                    <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginTop: scaleSize(3) }}>
                        <Text>低</Text>
                        <Text>{low.toFixed(2)}</Text>
                    </View>
                    <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginTop: scaleSize(3) }}>
                        <Text>24H</Text>
                        <Text>{amount.toFixed(0)}</Text>
                    </View>
                </View>
            </View>
        )
    }

    render() {
        const { navigation } = this.props;
        const { coinType } = this.state;
        const symbolName = (coinType.split('/').join('')).toLocaleLowerCase();
        const buttonGroupHeight = 120;

        return (
            <View>
                <CommonTitleBar title={coinType} nav={navigation} backgroundColor={'white'} />
                <View style={{
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'space-between',
                    height: deviceHeight - Global.titleBarHeight,
                }}>
                    <View>
                        <ScrollView style={[styles.container, { backgroundColor: 'white', height: deviceHeight - Global.titleBarHeight - buttonGroupHeight }]}>
                            {
                                this.renderInfo()
                            }

                            {/* k-line */}
                            <View style={{ height: 353, width: '100%', backgroundColor: 'white' }}>
                                <WebView

                                    source={{ uri: `http://localhost:3001/${symbolName}` }}
                                // source={{uri: `http://192.168.1.10:8080/`}}
                                // source={{uri: `http://localhost:8080/`}}
                                // source={{uri: 'http://52.80.227.25:3000/dashboard'}}
                                // source={{uri: 'http://192.168.1.10:3001/btcusdt'}}
                                >
                                </WebView>
                            </View>

                            <View style={{ display: 'flex', flexDirection: 'row', height: scaleSize(400) }}>
                            {
                                this.renderRecent()
                            }
                            </View>

                        </ScrollView>
                    </View>

                    <View style={[{ display: 'flex', height: scaleSize(buttonGroupHeight), justifyContent: 'space-around', flexDirection: 'row', alignItems: 'center', backgroundColor: 'white' }]}>
                        <NccButton buttonStyle={{ width: '45%', backgroundColor: Global.buyColor }} text={'买入'} onPress={
                            () => {
                                this.turnToPage(ROUTERMAP.transaction, {
                                    coinType: coinType,
                                    opStatus: 'buy'
                                })
                            }
                        } />
                        <NccButton buttonStyle={{ width: '45%', backgroundColor: Global.sellColor }} text={'卖出'} onPress={() => {
                            this.turnToPage(ROUTERMAP.transaction, {
                                coinType: coinType,
                                opStatus: 'sell'
                            })
                        }} />
                        {/* <NccButton buttonStyle={{ width: '30%' }} text={'撤单'} /> */}
                    </View>
                    
                </View>
            </View>
        )
    }
}


const styles = StyleSheet.create({
    container: {

    },
    buttonGroup: {

    }
});


export default connect(
    (state) => ({
        marketInfo: state.market,
        lastPrice: state.lastPrice,
    })
)(MakertInfo);